<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>お前はもう死んでいる. あたたたたたたたオワタ</title>
        <style>
            canvas {
                border: 1px solid black;
            }
        </style>
        <script src="arctic.js" charset="UTF-8"></script>
        <script>
            var BRUST_IMAGE = 'burst.png';
            var CRASH_WIDTH = 50;
            var CRASH_HEIGHT= 50;
            
            (function() {
                /**
                 * メインクラスを作成
                 */
                var Main = arc.Class.create(arc.Game, {
                    initialize: function(params) {
                        arc.util.trace(params.title, params.subTitle);
                        var self = this;
                        
                        // ルートを生成して黒で塗りつぶす
                        var root = new arc.display.Shape();
                        root.beginFill(0x000000, 1.0);
                        root.drawRect(0, 0, 320, 320);
                        root.endFill();
                        this.addChild(root);
                        
                        
                        //タッチイベント登録
                        root.addEventListener(arc.Event.TOUCH_START, function(e) {
                            // ムービークリップ生成
                            var mc = new arc.display.SheetMovieClip(self._system.getImage(BRUST_IMAGE), 174, 5, true);
                            // タッチした位置に表示する
                            mc.setX(e.x - CRASH_WIDTH/2);
                            mc.setY(e.y - CRASH_HEIGHT/2);  
                            // 幅, 高さを生成
                            mc.setWidth(CRASH_WIDTH);
                            mc.setHeight(CRASH_HEIGHT);
                            // 再生
                            mc.play();
                            // GAME クラスに追加
                            self.addChild(mc);
                        });
                    }
                    
                });
                
                /**
                 * DOM 読み込み完了時イベント
                 */
                window.addEventListener("DOMContentLoaded", function(event) {
                    // ID が canvas のやつをターゲットにする
                    var system = new arc.System(320, 320, "canvas");
                    // ゲームクラスをシステムにセット
                    system.setGameClass(Main, {title: "お前はもう死んでいる", subTitle:"あたたたたたたたオワタ"});
                    // 画像読み込み
                    system.load([BRUST_IMAGE]);
                }, false);
                
            })();
            
        </script>
    </head>
    <body>
        <h1>お前はもう死んでいる. あたたたたたたたオワタ</h1>
        <canvas id="canvas"></canvas>
    </body>
</html>